  <!--六级导航
  title:导航栏标题
  menuData:六级导航名（数组）
  active:默认显示页面(数组下标)
  -->
<template>
  <sg-card :body-style="{ padding: '0px', height: '100%'}" class="menu-card">
    <sg-container class="container-is-vertical">
      <div v-if="title.length > 0" class="title">
        <span>{{ title }}</span>
      </div>
      <sg-main class="menus">
        <div v-for="(itme, i) in menuData" :key="i" :class="{ menuActive: active === i }" @click="state(i)">
          <a href="javascript:void(0)">{{ itme.name }}</a>
        </div>
      </sg-main>
    </sg-container>
  </sg-card>
</template>

<script>
export default {
  name: 'SixMenu',
  props: {
    title: {
      type: String,
      default: ''
    },
    menuData: {
      type: Array,
      default: () => {
        []
      }
    }
  },
  data() {
    return {
      active: 0
    }
  },
  watch: {
    menuData(newVal, oldVal) {
      this.active = 0
    }
  },
  methods: {
    state(i) {
      this.active = i
      this.$emit('num', i)
    }
  }
}
</script>

<style scoped>
.container-is-vertical {
  flex-direction: column;
  height: 100%;
}
.sg-main {
  margin: 10px 0px;
  padding: 0px;
}
.menu-card {
  border-radius: 10px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}
.title {
  display: grid;
}
.title span {
  font-family:Source Han Sans CN;
  font-weight:700;
  color:#333333;
  font-size:16px;
  line-height:24px;
  margin-left: 10px;
  margin-top: 14px;
}
.menus {
  width: 100%;
  display: inline-grid;
  grid-template-rows: repeat(auto-fill, 50px);
  overflow: auto;
}
.menus div {
  height: 50px;
  text-align: left;
  line-height: 30px;
  overflow: hidden;
}
.menus div a {
  text-decoration: none;
  display: block;
  font-family:SourceHanSansCN-Regular;
  color:#666666;
  padding-left: 20px;
  font-size:14px;
  line-height:50px;
  height: 50px;
  float: left;
  width: calc(100% - 5px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menuActive {
  background-color: #f2f2f2;
  border-left: 4px solid#2f85f0;

}
.menuActive>:first-child{
  padding-left: 16px;
  color:#2f85f0;
}
</style>
